<template>
  <div>
    <!-- 用三元表达式实现创建动态class：
          :class="isOk ? '' : 'err'" -->
    <!-- 亦可以用对象—— key：value 的形式来声明 
          classname是否添加这个类名的判断：
        引号在扩号的外面 -->
    <input
      @blur="showMsg()"
      :class="{
        err: !isOk,
      }"
      :type="type"
      :placeholder="placeholder"
      v-model="value"
    />
    <div v-if="!isOk">{{ errMsg }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      isOk: true,
    };
  },
  props: ["placeholder", "type", "rule", "errMsg"],
  watch: {
    value(newVal) {
      if (this.rule.test(newVal)) {
        console.log("合法");
        this.isOk = true;
      } else {
        console.log(this.errMsg);
        this.isOk = false;
      }
      // 校验数据正确与否
      this.$emit("setValue", newVal);
    },
  },
  methods: {
    showMsg() {
      if (!this.isOk) {
        // alert(this.errMsg);
        this.$toast("咋就错了类？？");
      }
    },
  },
};
</script>

<style lang="less" scoped>
// input框：
input {
  margin-bottom: 10 / 360 * 100vw;
  width: 100%;
  height: 40 / 360 * 100vw;
  line-height: 40 / 360 * 100vw;
  font-size: 18 / 360 * 100vw;
  background-color: #f2f2f2;
  border: none;
  // outline:none;
  outline: none;
  border-bottom: 1px solid #333;
  &::-webkit-input-placeholder {
    /* WebKit browsers */

    color: #858383;
  }
}
.err {
  border-color: red;
}
</style>